﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>车辆监控</title>
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <!--顶部-->
    <header>
        <div class="left nav">
            <ul>
                <li><i class="nav_1"></i><a href="index.html">数据概览</a> </li>
                <li class="nav_active"><i class="nav_2"></i><a href="carContrl.html">车辆监控</a> </li>
                <li><i class="nav_3"></i><a href="map.html">地图界面</a> </li>
            </ul>
        </div>
        <div class="header_center left">
            <h2><strong>霍州煤电集团公路煤炭运输总览</strong></h2>

        </div>
        <!-- <h1>霍州煤电集团公路煤炭运输总览</h1> -->
        <div>

            <div>
                <a class="showScreen" href="javascript:toggleFullScreen();">全屏</a>
            </div>

            <div class="showTime"> <!--  <img src="images/weather.png"><span>多云转小雨</span> -->

            </div>

        </div>
        <script>
            var t = null;
            t = setTimeout(time, 1000); //開始运行
            function time() {
                clearTimeout(t); //清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); //获取时
                var m = dt.getMinutes(); //获取分
                var s = dt.getSeconds(); //获取秒
                const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                var week = weekdays[dt.getDay()];
                // document.getElementById("timeText").innerHTML =
                document.querySelector(".showTime").innerHTML =
                    (h < 10 ? ("0" + h) : h) +
                    ":" +
                    (m < 10 ? ("0" + m) : m) +
                    ":" +
                    (s < 10 ? ("0" + s) : s) + "  " +
                    y +
                    "-" +
                    (mt < 10 ? ("0" + mt) : mt) +
                    "-" +
                    (day < 10 ? ("0" + day) : day) + " " +
                    week;
                t = setTimeout(time, 1000); //设定定时器，循环运行
            }
            function toggleFullScreen() {
                if (!document.fullscreenElement) {
                    document.documentElement.requestFullscreen();
                    // document.querySelector(".showDay").innerHTML = "退出全屏";
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                        // document.querySelector(".showDay").innerHTML = "全屏显示";
                    }
                }
            }

        </script>
    </header>
    <section class="mainbox">
        <div class="column">
            <div class="panel bar">
                <h2>
                    车辆监控情况<!--  <a href="javascript:;">2023</a>
              <a href="javacript:;"> 2024</a> -->
                </h2>
                <div class="chart" id="left-one"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie">
                <h2>各煤种销量占比</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>历年年度销量对比</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
            <!-- <div class="no">
            <div class="no-hd">
              <ul>
                <li>125811</li>
                <li>104563</li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>前端需求人数</li>
                <li>市场供应人数</li>
              </ul>
            </div>
          </div> -->
            <div class="map">
                <div id="chart-map" class="chart"></div>
                <div id="chart-map1" class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>
            <!-- <div class="no">
            <div class="no-bd">
              <h2>当年各单位销量</h2>
              <div id="footer-row">
    
              </div>
            </div>
          </div> -->
            <div class="panel line">
                <h2>当年各单位销量</h2>
                <div class="chart" id="footer-row"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
            <div class="panel bar1">
                <h2>月度内调情况（万吨）</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line1">
                <h2>当年内调销量环比</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie1">
                <h2>当年客户销量</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>
    <script src="js/flexible.js"></script>
</body>

</html>